<template>
  <view>
    <up-navbar :is-fixed="true" :is-back="true" back-icon-color="#fff" title-color="#fff" title="图片优化技巧"
              :background="background" :border-bottom="false"></up-navbar>
    <view class="novice">
      <image mode="widthFix" src="https://lsz.lszbg.com/imgs/help/publish_help.png"></image>
    </view>
  </view>
</template>
<script setup>
import {ref} from "vue";

const background = ref({
  backgroundImage: 'linear-gradient(90deg, #FA762B, #FA762B)'
})
const playVideo = ref(false)
const banner = ref("")
const videoUrl = ref("")
</script>
<style>
/* 新手指南样式 */
page {
  margin: 0rpx;
  padding: 0rpx
}

.novice {
  margin: 0 auto;
  width: 100%;
  height: auto;
  padding: 0rpx;
  position: relative;
  margin-top: -2rpx;
}

.novice image {
  width: 750rpx;
  height: auto;
  border: 0rpx;
  margin: 0rpx;
  vertical-align: bottom;
}

.novice text {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff5a00;
  position: absolute;
  display: block;
  width: 100%;
  text-align: center;
  bottom: 2.1%;
}

.videoBox {
  width: 100%;
  height: 100%;
  margin: 0rpx auto;
  position: fixed;
  left: 0rpx;
  top: 0rpx;
  /*  #ifdef  H5  */
  top: calc(88rpx + constant(safe-area-inset-top));
  top: calc(88rpx + env(safe-area-inset-top));
  /*  #endif  */
}

.videoBox view {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0rpx;
  top: 0rpx;
  /*  #ifdef  H5  */
  top: calc(88rpx + constant(safe-area-inset-top));
  top: calc(88rpx + env(safe-area-inset-top));
  /*  #endif  */
}

.videoBox video {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
